<div style="width: 100%;">

    <table style="width: 100%;" id="sea-tab">
        <tr style="width: 100%;height: 40px">
            <td></td>
            <td style="width: 100px; text-align:right"><button class="layui-btn layui-btn-normal layui-btn-sm" onclick="fillDbInfo()" >+新增</button></td>
            <td style="width: 20px"></td>
        </tr>
    </table>

</div>

<hr class="layui-bg-gray">
<hr class="layui-bg-gray" id="tempDbInfo">

<table class="layui-hide" id="dbInfoList" lay-filter="dbInfoList" style="width: 100%"></table>

<script type="text/html" id="dbInfoBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">测试连接</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    $(function () {
        let configId = $('#tempConfigId').attr('tempConfigId');
        dbInfoList(configId);
    })

    function fillDbInfo() {
        layer.open({
            title:'添加数据库',
            id: 'LAY_DbAdd',//设定一个id，防止重复弹出
            type: 1,
            area: ['400px', '550px'],
            shadeClose: true,
            closeBtn: 0,
            btn: ['添加','取消'],
            content: getHtml('/sys/dbInfo/edit.html'),
            yes: function(index){
                // 执行确定逻辑
                addDbInfo();
                //parent.location.reload();
                layer.close(index);
            }
            ,btn2: function(index){
                layer.close(index);
            }
        });
    }

    function addDbInfo() {
        let configId = $('#eConfigId1').val();
        let dbType  = $('#edbType1').val();
        let dbHost = $('#edbHost1').val();
        let dbUsername = $('#edbUsername1').val();
        let dbPassword = window.btoa($('#edbPassword1').val());
        let dataBase = $('#eDataBase1').val();
        let mysqlType = $('#eMysqlType1').val();
        let charSet = $('#eCharSet1').val();

        let url = 'tableDbInfo/addRecord';
        let params = {'configId':configId,'dbType':dbType,'dbHost':dbHost,'dbUsername':dbUsername,
            'dbPassword':dbPassword,'dataBase':dataBase,'mysqlType':mysqlType,'charSet':charSet};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){

                layer.msg(result.desc);

                layui.use('table', function(){
                    var table = layui.table;
                    // 重载
                    table.reload('dbDataList', {
                        url: '/tableDbInfo/queryByConfigId',
                        method: 'post',
                        where:{'configId':$('#tempConfigId').attr('tempConfigId')},
                        response: {
                            statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                        },
                        parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                            return {
                                "code": res.errorCode, //解析接口状态
                                "msg": res.desc, //解析提示文本
                                "count": res.data.total, //解析数据长度
                                "data": res.data //解析数据列表
                            };
                        }
                    });
                })

            }
        })
    }

    function updateDbInfo() {
        let id = $('#edId1').val();
        let configId = $('#eConfigId1').val();
        let dbType  = $('#edbType1').val();
        let dbHost = $('#edbHost1').val();
        let dbUsername = $('#edbUsername1').val();
        let dbPassword = window.btoa($('#edbPassword1').val());
        let dataBase = $('#eDataBase1').val();
        let mysqlType = $('#eMysqlType1').val();
        let charSet = $('#eCharSet1').val();

        let url = 'tableDbInfo/updateOneById';
        let params = {'id':id,'configId':configId,'dbType':dbType,'dbHost':dbHost,'dbUsername':dbUsername,
            'dbPassword':dbPassword,'dataBase':dataBase,'mysqlType':mysqlType,'charSet':charSet};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                layer.msg(result.desc);

                layui.use('table', function(){
                    var table = layui.table;
                    // 重载
                    table.reload('dbDataList', {
                        url: '/tableDbInfo/queryByConfigId',
                        method: 'post',
                        where:{'configId':$('#tempConfigId').attr('tempConfigId')},
                        response: {
                            statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                        },
                        parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                            return {
                                "code": res.errorCode, //解析接口状态
                                "msg": res.desc, //解析提示文本
                                "count": res.data.total, //解析数据长度
                                "data": res.data //解析数据列表
                            };
                        }
                    });
                })
            }
        })
    }

    function testDbConn(data) {
        let url = 'mysql/testDbConn';
        let params = {
            'host':data.dbHost,
            'user':data.dbUsername,
            'pwd':data.dbPassword,
            'db':data.dataBase,
            'ce':data.charSet
        };

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                layer.alert(result.desc);
            }
        })
    }


    function deleteDbByIds(id) {
        let url = 'tableDbInfo/deleteById';
        $.ajax({  "type":"post",
            "url":url,
            "data":{'id':id},
            "success":function(result){
                layer.msg(result.desc);

                layui.use('table', function(){
                    var table = layui.table;
                    // 重载
                    table.reload('dbDataList', {
                        url: '/tableDbInfo/queryByConfigId',
                        method: 'post',
                        where:{'configId':$('#tempConfigId').attr('tempConfigId')},
                        response: {
                            statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                        },
                        parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                            return {
                                "code": res.errorCode, //解析接口状态
                                "msg": res.desc, //解析提示文本
                                "count": res.data.total, //解析数据长度
                                "data": res.data //解析数据列表
                            };
                        }
                    });
                })
            }
        })
    }

</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(dbInfoList)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(dbInfoList)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                //layer.msg('ID：'+ data.id + ' 的查看操作');
                testDbConn(data);
            } else if(obj.event === 'del'){
                // 执行删除操作
                layer.confirm('确定删除么', function(index){
                    obj.del();
                    layer.close(index);
                    deleteDbByIds(data.id);
                });


            } else if(obj.event === 'edit'){
                // 编辑操作
                $('#tempDbInfo').data('tempDbInfo',data);

                layer.open({
                    title:'修改数据库',
                    id: 'LAY_dbInfoEdit',//设定一个id，防止重复弹出
                    type: 1,
                    area: ['400px', '550px'],
                    shadeClose: true,
                    closeBtn: 0,
                    btn: ['修改','取消'],
                    content: getHtml('/sys/dbInfo/edit.html'),
                    yes: function(index){
                        // 执行更新操作
                        updateDbInfo();
                        layer.close(index);
                    }
                    ,btn2: function(index){
                        layer.close(index);
                    }
                });
            }
        });


        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>